<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['student:mycredit:add']"
        >新增</el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['student:mycredit:export']"
        >导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column width="120" label="年度" align="center" prop="duringYear" fixed="left" />
      <el-table-column label="借款人信息(学生)" align="center" >
        <el-table-column width="120" label="QQ" align="center" prop="qq" />
        <el-table-column width="180" label="学生身份证" align="center" prop="cardIdentity" />
        <el-table-column width="120" label="户口性质" align="center" prop="residence" />
        <el-table-column width="120" label="毕业中学" align="center" prop="medium" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="户籍" align="center" prop="household" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="申贷原因" align="center" prop="applyReason" :show-overflow-tooltip="true" />
        <el-table-column width="180" label="学生身份证有效起始日期" align="center" prop="studentEffectiveCardIdentity">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.studentEffectiveCardIdentity) }}</span>
          </template>
        </el-table-column>
        <el-table-column width="180" label="学生身份证有效结束日期" align="center" prop="studentInvalidCardIdentity" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.studentInvalidCardIdentity) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column width="120" label="共同借款人" align="center" :show-overflow-tooltip="true" >
        <el-table-column width="120" label="共同借款人姓名" align="center" prop="guarantor" :show-overflow-tooltip="true" />
        <el-table-column width="180" label="共同借款人联系电话" align="center" prop="guaPhone" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="关系" align="center" prop="relation" :show-overflow-tooltip="true" />
        <el-table-column width="180" label="共同借款人身份证号" align="center" prop="guaCardIdentity" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="健康状态" align="center" prop="heath" :show-overflow-tooltip="true" />
      </el-table-column>
      <el-table-column width="240" label="资助中心" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.supportCenterProvince }} {{ scope.row.supportCenterCity }} {{ scope.row.supportCenterArea }}</span>
        </template>
      </el-table-column>
      <el-table-column width="240" label="入学前户籍所在地" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.householdOfProvince }} {{ scope.row.householdOfCity }} {{ scope.row.householdOfArea }} {{ scope.row.householdOfCounty }} {{ scope.row.householdOfDetail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="家庭住址" align="center" :show-overflow-tooltip="true" >
        <el-table-column width="240" label="家庭住址所在地" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.homeOfProvince }} {{ scope.row.homeOfCity }} {{ scope.row.homeOfArea }} {{ scope.row.homeOfCounty }} {{ scope.row.homeOfDetail }}</span>
          </template>
        </el-table-column>
        <el-table-column width="140" label="是否与户籍地址一致" align="center" prop="isTheSameAsHousehold" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <span>{{ scope.row.isTheSameAsHousehold === 'true' ? '是' : '否'  }}</span>
          </template>
        </el-table-column>
        <el-table-column width="140" label="家庭住址邮政编码" align="center" prop="homeOfPostcode" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="家庭电话" align="center" prop="homeOfPhone" :show-overflow-tooltip="true" />
      </el-table-column>
      <el-table-column label="就学信息" align="center" :show-overflow-tooltip="true" >
        <el-table-column label="高校名称" align="center" prop="collegeOfName" :show-overflow-tooltip="true" />
        <el-table-column width="160" label="院系名称" align="center" prop="collegeOfInstitute" :show-overflow-tooltip="true" />
        <el-table-column label="专业名称" align="center" prop="collegeOfMajor" :show-overflow-tooltip="true" />
        <el-table-column label="入学时间" align="center" prop="collegeWithStart" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.collegeWithStart) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" align="center" prop="collegeOfEducation" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="学生学号" align="center" prop="studentNo" :show-overflow-tooltip="true" />
        <el-table-column label="专业类别" align="center" prop="typeOfMajor" :show-overflow-tooltip="true" />
        <el-table-column label="学制" align="center" prop="collegeOfEducationalSystem" :show-overflow-tooltip="true" />
        <el-table-column label="毕业时间" align="center" prop="collegeWithEnd" width="120" />
      </el-table-column>
      <el-table-column width="120" label="资格审查确认" align="center" :show-overflow-tooltip="true" >
        <el-table-column width="120" label="资格审查单位" align="center" prop="countyUnit" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="是否盖章" align="center" prop="isSeal" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="盖章日期" align="center" prop="sealDate" :show-overflow-tooltip="true" />
        <el-table-column width="120" label="学生签字日期" align="center" prop="signatureDate"/>
      </el-table-column>
      <el-table-column label="就业信息" align="center" :show-overflow-tooltip="true" >
        <el-table-column label="工作单位" align="center" prop="workFeature" :show-overflow-tooltip="true" />
        <el-table-column label="单位性质" align="center" prop="phoneOfUnit" :show-overflow-tooltip="true" />
        <el-table-column label="单位电话" align="center" prop="postCodeOfUnit" :show-overflow-tooltip="true" />
        <el-table-column width="140" label="单位邮政编码" align="center" prop="addressOfUnit" :show-overflow-tooltip="true" />
        <el-table-column label="单位地址" align="center" prop="addressOfUnit" :show-overflow-tooltip="true" />
      </el-table-column>
      <el-table-column label="变更" align="center" prop="changeForReason" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" fixed="right" width="360" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            style="float: left; margin-left: 10px"
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['student:mycredit:edit']"
          >编辑</el-button>
          <el-button
            style="float: left; width: 120px"
            @click="exportWord(scope.row)"
            size="small" type="success">导出贷款申请表</el-button>
          <el-button
            :disabled="!scope.row.rebackCode"
            style="float: left; width: 120px"
            @click="exportReceipt(scope.row)"
            size="small" type="warning">导出贷款回执单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog style="height: 600px" width="1070px" :title="title" :visible.sync="open" append-to-body>
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="120px" style="width: 1060px; height: 1600px">
        <el-tag
          type=""
          effect="plain">
          基本信息
        </el-tag>
        <br/>
        <el-form-item style="margin-top: 20px; margin-left: 24px" label="贷款的年度" prop="duringYear">
          <el-select
            style="margin-left: 30px"
            :disabled="title.includes('修改')"
            v-model="form.duringYear" placeholder="请选择年度">
            <el-option
              v-for="item in dynamicYearOption"
              :key="item.duringYear"
              :label="item.duringYear"
              :value="item.duringYear"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 20px; margin-left: 20px" label="学生身份证" prop="cardIdentity">
          <el-input v-model="form.cardIdentity" style="width: 197px"/>
        </el-form-item>
        <el-form-item style="margin-top: 20px; margin-left: -20px" label="户籍" prop="household">
          <el-input v-model="form.household" />
        </el-form-item>
        <el-form-item label="身份证有效起始日期" prop="studentEffectiveCardIdentity" style="margin-left: 60px; margin-top: 0px;"  label-width="140px">
          <div class="block">
            <el-date-picker
              style="width: 165px"
              v-model="form.studentEffectiveCardIdentity"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="身份证有效结束日期" prop="studentInvalidCardIdentity" style="margin-left: 56px" label-width="140px">
          <div class="block">
            <el-date-picker
              style="width: 142px"
              v-model="form.studentInvalidCardIdentity"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="毕业中学" style="margin-left: 10px" prop="medium">
          <el-input v-model="form.medium" style="width: 148px;" />
        </el-form-item>
        <el-form-item style="margin-left: 10px" label="户口性质" prop="residence">
          <el-select v-model="form.residence" placeholder="请选择户口性质" style="width: 189px; margin-left: 46px">
            <el-option
              v-for="item in residenceArray"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资助中心" prop="supportCenterProvince" style="margin-left: 6px">
          <el-cascader
            style="margin-left: 20px"
            size="small"
            :options="options"
            v-model="selectedOptionsSupportCenter"
            @change="handleChangeSupportCenter">
          </el-cascader>
        </el-form-item>
        <el-form-item style="margin-left: 24px" label="共同借款人" prop="guarantor">
          <el-input v-model="form.guarantor" style="width: 134px"/>
        </el-form-item>
        <el-form-item style="margin-left: 60px;" label-width="180" label="共同借款人联系电话" prop="guaPhone">
          <el-input v-model="form.guaPhone" style="width: 167px"/>
        </el-form-item>
        <el-form-item style="margin-left: 57px" label-width="180" label="关系" prop="relation">
          <el-input v-model="form.relation" style="margin-left: 49px; width: 194px"/>
        </el-form-item>
        <el-form-item style="margin-left: 64px" label-width="180" label="健康状态" prop="heath">
          <el-input v-model="form.heath" style="width: 145px"/>
        </el-form-item>
        <el-form-item style="margin-left: 58px" label-width="180" label="共同借款人身份证号" prop="guaCardIdentity">
          <el-input v-model="form.guaCardIdentity" style="width: 170px;"/>
        </el-form-item>
        <el-form-item style="margin-left: 55px" label-width="180" label="学生的QQ" prop="guaCardIdentity">
          <el-input v-model="form.qq" style="width: 191px; margin-left: 16px"/>
        </el-form-item>
        <el-form-item label="入学前户籍所在地" prop="householdOfProvince" label-width="200" style="margin-left: 60px" >
          <el-cascader
            size="small"
            :options="options"
            v-model="selectedOptionsHousehold"
            @change="handleChangeHousehold">
          </el-cascader>
          <el-input v-model="form.householdOfDetail" style="width: 740px; margin-top: 20px; margin-left: 10px" placeholder="写到门牌号"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col v-show="isShowUploadOfFont" :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="140" label="身份证正面" style="margin-top: 20px; height: 140px; width: 300px">

              <el-upload
                style="width: 140px; height: 60px"
                class="upload-demo"
                drag
                :headers="upload.headers"
                ref="uploadOfFront"
                :action="upload.urlOfFront"
                :before-upload="beforeUploadOfFront"
                :on-remove="handleRemove"
                :on-error = "error"
                :on-success="successOfFront"
                :auto-upload="true"
                :data="uploadDataOfFront"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="140" label="身份证反面" style="margin-top: 20px; height: 140px">
              <el-upload
                class="upload-demo"
                drag
                :headers="upload.headers"
                ref="upload"
                :action="upload.url"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :on-error = "error"
                :on-success="successResave"
                :auto-upload="true"
                :data="uploadData"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="140" label="户口本照片" style="margin-top: 20px; height: 140px">

              <el-upload
                class="upload-demo"
                drag
                :headers="upload.headers"
                ref="uploadOfHouse"
                :action="upload.urlOfHouse"
                :before-upload="beforeUploadOfHouse"
                :on-remove="handleRemove"
                :on-error = "error"
                :on-success="successOfHouse"
                :auto-upload="true"
                :data="uploadDataOfHouse"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>

            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row style="margin-top: 20px" :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="140" label="录取通知书" style="margin-top: 50px; height: 140px">

              <el-upload
                class="upload-demo"
                drag
                :headers="upload.headers"
                ref="uploadOfLetter"
                :action="upload.urlOfLetter"
                :before-upload="beforeUploadOfLetter"
                :on-remove="handleRemove"
                :on-error = "error"
                :on-success="successOfLetter"
                :auto-upload="true"
                :data="uploadDataOfLetter"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>

            </el-form-item>
          </div></el-col>
          <el-col :span="9"><div class="grid-content bg-purple">
            <el-form-item label-width="140" label="贫困认定材料" style="margin-top: 50px; height: 140px">

              <el-upload
                class="upload-demo"
                drag
                :headers="upload.headers"
                ref="uploadOfCer"
                :action="upload.urlOfCer"
                :before-upload="beforeUploadOfCer"
                :on-remove="handleRemove"
                :on-error = "error"
                :on-success="successOfCer"
                :auto-upload="true"
                :data="uploadDataOfCer"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>

            </el-form-item>
          </div></el-col>
        </el-row>

        <el-form-item label="申贷原因*" prop="applyReason" style="margin-top: 60px">
          <el-input
            type="textarea"
            style="width: 890px"
            :autosize="{ minRows: 4, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.applyReason">
          </el-input>
        </el-form-item>
        <br/>
        <el-tag
          type="danger"
          effect="plain">
          家庭信息
        </el-tag>
        <el-form-item label="家庭地址" prop="homeOfProvince" label-width="120" style="width: 1060px; margin-top: 20px; margin-left: 60px">
          <el-cascader
            size="small"
            :options="options"
            v-model="selectedOptionsHome"
            @change="handleChangeHome">
          </el-cascader>
          <el-input v-model="form.homeOfDetail" style="width: 680px; margin-top: 20px; margin-left: 10px" />
          <br/>
          <el-checkbox v-model="form.isTheSameAsHousehold" style="margin-top: 20px">与户籍地址一致</el-checkbox>
        </el-form-item>
        <el-form-item label="家庭电话" style="margin-left: 9px" prop="homeOfPhone">
          <el-input v-model="form.homeOfPhone" />
        </el-form-item>
        <el-form-item label="家庭邮政编码" style="margin-left: 30px" prop="homeOfPhone">
          <el-input v-model="form.homeOfPostcode" />
        </el-form-item>
        <br/>
        <el-tag
          type=""
          effect="plain">
          就学信息
        </el-tag>
        <el-form-item style="margin-top: 40px; margin-left: -60px" label="高校名称" prop="collegeOfName">
          <el-input v-model="form.collegeOfName" />
        </el-form-item>
        <el-form-item style="margin-top: 40px; margin-left: 4px" label="院系名称" prop="collegeOfInstitute">
          <el-input v-model="form.collegeOfInstitute" />
        </el-form-item>
        <el-form-item style="margin-top: 40px" label="专业名称" prop="collegeOfMajor">
          <el-input v-model="form.collegeOfMajor" />
        </el-form-item>
        <el-form-item style="margin-left: -18px" label="学历" prop="collegeOfEducation">
          <el-select style="width: 178px; margin-left: 27px" v-model="form.collegeOfEducation" placeholder="请选择学历">
            <el-option
              v-for="item in collegeOfEducationArray"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 6px" label="入学时间" prop="collegeWithStart">
          <div class="block">
            <el-date-picker
              style="width: 176px"
              v-model="form.collegeWithStart"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item style="margin-left: -26px" label="学号" prop="studentNo">
          <el-input style="margin-left: 25px; width: 178px" v-model="form.studentNo" />
        </el-form-item>
        <el-form-item style="margin-left: 10px" label="专业类别" prop="typeOfMajor">
          <el-select style="width: 178px" v-model="form.typeOfMajor" placeholder="请选择专业类型">
            <el-option
              v-for="item in typeOfMajorArray"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: -21px" label="学制" prop="collegeOfEducationalSystem">
          <el-select style="margin-left: 26px; width: 176px" v-model="form.collegeOfEducationalSystem" placeholder="请选择学制">
            <el-option
              v-for="item in collegeOfEducationalSystemArray"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: -16px" label="毕业时间" prop="collegeWithEnd" label-width="140px">
          <div class="block">
            <el-date-picker
              style="width: 180px; margin-left: -5px"
              v-model="form.collegeWithEnd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <br/>
        <el-tag
          type="danger"
          effect="plain">
          其它信息
        </el-tag>
        <br/>
        <el-form-item style="margin-top: 40px" label="变更原因*" prop="changeForReason">
          <el-input
            type="textarea"
            style="width: 880px"
            :autosize="{ minRows: 4, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.changeForReason">s
          </el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: -90px" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelInsert">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getData, delData, addData, updateData, exportData } from "@/api/county/credit";
  import { regionData,CodeToText } from 'element-china-area-data'
  import { getUserProfile } from "@/api/system/user";
  import { getToken } from '../../../utils/auth'
  import { getCredits, selectNewCreateByUserName } from '../../../api/county/credit'
  import { listYearJsonData, selectYearNotInAlreadyCreditYear } from '../../../api/yearJson/yearJson'

  export default {
    data() {
      return {
        isShowUploadOfFont: true,
        // 用户上传参数
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/student/upload/reverse",
          urlOfFront: process.env.VUE_APP_BASE_API + "/student/upload/front",
          urlOfLetter: process.env.VUE_APP_BASE_API + "/student/credit/data/letter",
          urlOfCer: process.env.VUE_APP_BASE_API + "/student/credit/data/cer",
          urlOfHouse: process.env.VUE_APP_BASE_API + "/student/credit/data/house",
        },
        uploadData: null,
        uploadDataOfFront: null,
        uploadDataOfLetter: null,
        uploadDataOfHouse: null,
        uploadDataOfCer: null,
        resultList: [],
        imgRealizeName: '',
        imgRealizeNation: '',
        imgRealizeIdCard: '',
        dialogImageUrl: '',
        dialogVisible: false,
        user: '',
        options: regionData,
        selectedOptionsSupportCenter: [],
        selectedOptionsHousehold: [],
        selectedOptionsHome: [],
        collegeOfEducationArray: [
          '小学',
          '中学',
          '高中',
          '大专',
          '本科',
          '研究生',
          '硕士',
          '博士',
        ],
        collegeOfEducationalSystemArray: [
          '三年',
          '四年',
          '五年',
        ],
        typeOfMajorArray: [
          '哲学',
          '经济学',
          '法学',
          '教育学',
          '文学',
          '历史学',
          '理学',
          '工学',
          '农学',
          '医学',
          '军事学',
          '管理学',
          '艺术学',
        ],
        residenceArray: [
          "城镇户口",
          "农业户口",
        ],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 学生贷款表格数据
        dataList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 状态数据学生贷款
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          creditName: undefined,
          userName: undefined,
          status: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        dynamicYearOption: [],
        AllOptionalDuringYear: [],
        selectYearNotInAlreadyCreditYearArray: [],
        nowRowCredit: ''
      };
    },
    created() {
      this.getList()
      this.getUser()
    },
    watch: {
      'form.isTheSameAsHousehold'(newValue, oldValue) {
        if (newValue === true) {
          this.form.homeOfProvince = this.form.householdOfProvince
          this.form.homeOfCity = this.form.householdOfCity
          this.form.homeOfArea = this.form.householdOfArea
          this.form.homeOfDetail = this.form.householdOfDetail
          console.log('与户籍地址一致')
          console.log(this.form.homeOfProvince)
          console.log(this.form.homeOfCity)
          console.log(this.form.homeOfArea)
          console.log(this.form.homeOfDetail)
        }
      },
      'open'(newValue, oldValue) {
        if (newValue === false) {
          selectNewCreateByUserName(this.$store.state.user.name).then(res => {
            if (res.data === null) {
              this.open = false
            } else if (res.data.cardIdentity === null) {
              delData(res.data.creditId).then(() => {
                this.getList();
                this.open = false
              })
            } else {
              this.open = false
            }
          })
        }
      },
      'dataList.length'(newValue, oldValue) {
        console.log(newValue)
        if (newValue > 0 ) {
          this.selectYearNotInAlreadyCreditYear()
        } else {
          this.selectAllOptionalDuringYear()
        }
      }
    },
    methods: {
      selectAllOptionalDuringYear() {
        listYearJsonData().then(res => {
          this.dynamicYearOption = res.rows
          console.log(this.dynamicYearOption)
        })
      },
      // 根据当前用户名获取已经贷款的年度，返回没有贷款的年度选项数组
      selectYearNotInAlreadyCreditYear() {
        selectYearNotInAlreadyCreditYear(this.$store.state.user.name).then(res => {
          this.dynamicYearOption = res.data
        })
      },

      // 取消新增
      cancelInsert() {
        selectNewCreateByUserName(this.$store.state.user.name).then(res => {
          if (res.data.cardIdentity === null) {
            delData(res.data.creditId).then(() => {
              this.getList();
              this.open = false
            })
          } else {
            this.open = false
          }
        })
      },
      //上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //上传成功钩子
      successResave(response, file, fileList){
        console.log(response)
        this.form.identityPathOfReverse = response.identityOfReverseUrl
        this.msgSuccess('上传身份证照片成功!')
        this.getList()
      },
      successOfFront(res, file, fileList){
        console.log(res)
        this.form.identityPathOfFront = res.identityOfFrontUrl
        if (res.word === '') {
          this.$message.warning('请上传正确的身份证正面照片')
        }
        this.imgRealizeIdCard = res.word // 拿到识别后的身份证号
        this.imgRealizeNation = res.nation + '族' // 拿到识别后的民族
        console.log(this.imgRealizeIdCard)
        console.log(this.imgRealizeNation)

        this.isShowUploadOfFont = false

        this.msgSuccess('文件上传并识别成功')
      },
      successOfHouse(response, file, fileList){
        console.log(response)
        this.form.householdRegistrationBook = response.householdRegistrationBookPath
        this.msgSuccess('上传家庭户口本照片成功!')
        this.getList()
      },
      successOfCer(response, file, fileList){
        console.log(response)
        this.form.certificat = response.certificatPath
        this.msgSuccess('上传贫困材料证明照片成功!')
        this.getList()
      },
      successOfLetter(response, file, fileList){
        console.log(response)
        this.form.letterOfAdmission = response.letterOfAdmissionPath
        this.msgSuccess('上传录取通知书照片成功!')
        this.getList()
      },
      //失败钩子
      error(response, file, fileList){
        console.log(response)
      },
      beforeUpload (file) {
        if (this.form.creditId === null) {
            this.uploadData = {identityfileofreverse:  file, creditId: 0, userName: this.$store.state.user.name};
            console.log(this.uploadData)
            let promise = new Promise((resolve) => {
              this.$nextTick(function () {
                resolve(true);
              });
            });
            return promise; //通过返回一个promise对象解决
        } else {
          this.uploadData = {identityfileofreverse:  file, creditId: this.form.creditId, userName: this.$store.state.user.name};
          console.log(this.uploadData)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        }
      },
      beforeUploadOfFront (file) {
        if (this.title.includes('添加')) {
          this.uploadDataOfFront = {identityfileoffront:  file, creditId: 0, userName: this.$store.state.user.name};
          console.log(this.uploadDataOfFront)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        } else {
          this.uploadDataOfFront = {identityfileoffront:  file, creditId: this.form.creditId, userName: this.$store.state.user.name };
          console.log(this.uploadDataOfFront)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        }
      },

      beforeUploadOfHouse (file) {
        if (this.form.creditId === null) {
          this.uploadDataOfHouse = {householdRegistrationBook:  file, creditId: 0, userName: this.$store.state.user.name};
          console.log(this.uploadDataOfHouse)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        } else {
          this.uploadDataOfHouse = {householdRegistrationBook:  file, creditId: this.form.creditId, userName: this.$store.state.user.name};
          console.log(this.uploadDataOfHouse)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        }
      },

      beforeUploadOfLetter (file) {
        if (this.form.creditId === null) {
          this.uploadDataOfLetter = {letterOfAdmission:  file, creditId: 0, userName: this.$store.state.user.name };
          console.log(this.uploadDataOfLetter)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        } else {
          this.uploadDataOfLetter = {letterOfAdmission:  file, creditId: this.form.creditId, userName: this.$store.state.user.name};
          console.log(this.uploadDataOfLetter)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        }
      },

      beforeUploadOfCer (file) {
        if (this.form.creditId === null) {
          this.uploadDataOfCer = {certificat:  file, creditId: 0, userName: this.$store.state.user.name };
          console.log(this.uploadDataOfCer)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        } else {
          this.uploadDataOfCer = {certificat:  file, creditId: this.form.creditId, userName: this.$store.state.user.name};
          console.log(this.uploadDataOfCer)
          let promise = new Promise((resolve) => {
            this.$nextTick(function () {
              resolve(true);
            });
          });
          return promise; //通过返回一个promise对象解决
        }

      },

      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
        });
      },
      handleChangeSupportCenter (value) {
        let data = CodeToText[value[0]]+", "+ CodeToText[value[1]]+", "+ CodeToText[value[2]];
        this.form.supportCenterProvince = CodeToText[value[0]]
        this.form.supportCenterCity = CodeToText[value[1]]
        this.form.supportCenterArea = CodeToText[value[2]]
        console.log(data)
      },
      handleChangeHousehold (value) {
        let data = CodeToText[value[0]]+", "+ CodeToText[value[1]]+", "+ CodeToText[value[2]];
        this.form.householdOfProvince = CodeToText[value[0]]
        this.form.householdOfCity = CodeToText[value[1]]
        this.form.householdOfArea = CodeToText[value[2]]
        console.log(data)
      },
      handleChangeHome (value) {
        let data = CodeToText[value[0]]+", "+ CodeToText[value[1]]+", "+ CodeToText[value[2]];
        this.form.homeOfProvince = CodeToText[value[0]]
        this.form.homeOfCity = CodeToText[value[1]]
        this.form.homeOfArea = CodeToText[value[2]]
        console.log(data)
      },
      /** 查询学生贷款数据列表 */
      getList() {
        this.loading = true;
        getCredits(this.$store.state.user.name).then(response => {
          console.log(response.data)
          this.dataList = response.data
          this.total = response.data.length
          this.loading = false
          if (response.data.length === 0) {
            this.dynamicYearOption = this.AllOptionalDuringYear
          } else {
            this.dynamicYearOption = this.AllOptionalDuringYear
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          creditId: null,
          duringYear: undefined,
          qq: undefined,
          birth: undefined,
          cardIdentity: undefined,
          residence: undefined,
          medium: undefined, household: undefined,
          email: undefined, address: undefined, postcode: undefined,
          guarantor: undefined, guaPhone: undefined, relation: undefined,
          guaCardIdentity: undefined, heath: undefined,
          applyReason: undefined, signatureDate: undefined, countyUnit: undefined,
          isSeal: undefined, sealDate: undefined, studentEffectiveCardIdentity: undefined,
          studentInvalidCardIdentity: undefined, supportCenterProvince: undefined,
          supportCenterCity: undefined, supportCenterArea: undefined,
          householdOfProvince: undefined, householdOfCity: undefined,
          householdOfArea: undefined, householdOfCounty: undefined,
          householdOfDetail: undefined, homeOfProvince: undefined,
          homeOfCity: undefined, homeOfArea: undefined, homeOfCounty: undefined,
          homeOfDetail: undefined, isTheSameAsHousehold: undefined,
          homeOfPostcode: undefined, homeOfPhone: undefined, concatOfName: undefined,
          concatWorkUnit: undefined, concatOfPhone: undefined, concatOfCardIdentity: undefined,
          collegeOfName: undefined, collegeOfInstitute: undefined,
          collegeOfMajor: undefined, collegeOfEducation: undefined,
          collegeWithStart: undefined, studentNo: undefined, typeOfMajor: undefined,
          collegeOfEducationalSystem: undefined,
          collegeWithEnd: undefined, workUnit: undefined, workFeature: undefined,
          phoneOfUnit: undefined, postcodeOfUnit: undefined, addressOfUnit: undefined,
          changeForReason: undefined,
          identityPathOfFront: undefined,
          identityPathOfReverse: undefined,
          letterOfAdmission: undefined, certificat: undefined, householdRegistrationBook: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加学生贷款数据";
        this.form.userName = this.queryParams.userName;
        // 初始化 年度列表
        if (this.dataList.length === 0) {
          this.selectAllOptionalDuringYear()
        } else if (this.dataList.length > 0) {
          this.selectYearNotInAlreadyCreditYear()
        }
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.creditId)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        // 先把身份证正面照上传组件显示出来
        this.isShowUploadOfFont = false
        this.reset();
        const creditId = row.creditId || this.ids
        this.nowRowCredit = row.creditId
        getData(creditId).then(response => {
          console.log(response)
          this.form = response.data;
          this.open = true;
          this.title = "修改学生贷款数据";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.title.includes('添加')) {
        /*      if (this.$store.state.user.name !== this.imgRealizeName) {
                this.msgInfo('姓名与身份证上不符,请重新上传身份证照片正面!')
                return
              }*/
              console.log(this.form.cardIdentity)
              console.log(this.imgRealizeIdCard)
              if (this.form.cardIdentity !== this.imgRealizeIdCard) {
                this.msgInfo('身份证号与身份证上不符!')
                return
              }

              // 因为处理了文件上传 视图添加效果即是更新操作
              selectNewCreateByUserName(this.$store.state.user.name).then(res => {
                if (res.data !== null) {
                  this.form.creditId = res.data.creditId
                  this.form.nation = this.imgRealizeNation
                  updateData(this.form).then(response => {
                    if (response.code === 200) {
                      this.msgSuccess("添加成功");
                      this.open = false;
                      this.getList();
                      console.log(response)
                    }
                  });
                }
              })

            } else if (this.title.includes('修改')) {
              updateData(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                  console.log(response)
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const creditIds = row.creditId || this.ids;
        this.$confirm('是否确认删除学生贷款编码为"' + creditIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delData(creditIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportData(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
      },
      handleDownload(file) {
        console.log(file);
      },
      // 监听上传失败
      handleError(e, file, fileList) {
        const msg = JSON.parse(e.message)
        this.$notify({
          title: msg.message,
          type: 'error',
          duration: 2500
        })
      },
      // 点击导出word 贷款申请表
      exportWord(row) {
        let _this = this;
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent("/贷款申请表.docx", function(error, content) {
          // 贷款申请表.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }

          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new window.docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            userName: row.userName,
            sex: _this.user.sex === 1 ? '女' : '男',
            qq: row.qq,
            cardIdentity: row.cardIdentity,
            nation: row.nation,
            residence: row.residence,
            email: _this.$store.state.user.email === '' ? '' : _this.$store.state.user.email,
            medium: row.medium,
            householdOfProvince: row.householdOfProvince,
            householdOfCity: row.householdOfCity,
            householdOfArea: row.householdOfArea,
            householdOfDetail: row.householdOfDetail,
            phone: _this.user.phonenumber,
            guarantor: row.guarantor,
            guaPhone: row.guaPhone,
            relation: row.relation,
            guaCardIdentity: row.guaCardIdentity,
            heath: row.heath,
            homeOfProvince: row.homeOfProvince,
            homeOfCity: row.homeOfCity,
            homeOfArea: row.homeOfArea,
            collegeOfName: row.collegeOfName,
            collegeOfInstitute: row.collegeOfInstitute,
            collegeOfMajor: row.collegeOfMajor,
            collegeWithStart: row.collegeWithStart,
            collegeOfEducationalSystem: row.collegeOfEducationalSystem,
            collegeWithEnd: row.collegeWithEnd,
            collegeOfEducation: row.collegeOfEducation,
            studentNo: row.studentNo,
            yearLimit: '六年',
            money: '6000',
            countyUnit: row.countyUnit,
            countyOfConcat: '谭选项',
            countyOfPhone: '13627743242',
            // ..._this.form
            // table: _this.tableData
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, "学生贷款申请表.docx");
        });
      },

      // 点击导出word 贷款回执单
      exportReceipt(row) {
        let _this = this;
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent("/个人受理证明.docx", function(error, content) {
          // 个人受理证明.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }

          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new window.docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            homeOfProvince: row.homeOfProvince,
            homeOfCity: row.homeOfCity,
            homeOfArea: row.homeOfArea,
            hsienOfName: row.homeOfProvince + row.homeOfProvince + row.homeOfProvince + '资助管理中心',
            hsienOfAddress: row.homeOfProvince + row.homeOfProvince + row.homeOfProvince,
            hsienOfPostCode: '547100',
            hsienOfConcat: '姚良玉',
            hsienOfPhone: '07788821082',
            userName: row.userName,
            cardIdentity: row.cardIdentity,
            collegeOfName: row.collegeOfName,
            collegeOfCode: '113345',
            collegeOfMajor: row.collegeOfMajor,
            collegeOfInstitute: row.collegeOfInstitute,
            collegeWithEnd: row.collegeWithEnd,
            duringYear: row.duringYear,
            contractId: row.contractId,
            money: '6000',
            rebackCode: row.rebackCode,
            accountName: 'jjshssdss',
            accountPassword: Math.floor((Math.random()*100000)+1),
            // ..._this.form
            // table: _this.tableData
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, "学生贷款回执单.docx");
        });
      }
    },
  };
</script>

<style>
  .el-upload-dragger {
    width: 240px;
    height: 160px;
  }
  .el-upload__text {
    height: 30px;
  }

</style>
